/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...






$("form")[0].addEventListener("submit", function (e) {
  e.preventDefault()
})

$("form>input").change(function (e) {
  let arr = JSON.parse(window.localStorage.getItem("cart")) || []
  arr[arr.length] = {
    id:arr.length,
    text: $(this).val(),
    isSelect: false,
  }
  $(this).val("")
  window.localStorage.setItem("cart", JSON.stringify(arr))
  List()
})

List()
function List() {
  let arr = JSON.parse(window.localStorage.getItem("cart")) || []
  $("body>section").html("")
  let ingNum =0
  arr.forEach(t=>{
    if(t.isSelect===false){
      ingNum++
    }
  })
  let str = `
  <h2>正在进行 <span id="todocount">${ingNum}</span></h2>
  <ol id="todolist" class="demo-box">
  `

  const conduct = arr.filter(t => t.isSelect === false)
  conduct.forEach(t => {
    str += `
    <li>
				<input class="input" data-id=${t.id} type="checkbox" />
				<p class="count" data-id=${t.id}>${t.text}
        <input data-id=${t.id} class="count_t" value="${t.text}" style="display:none">
        </p>
				<a class="del"  data-id=${t.id} href="javascript:;" data-id=${t.id}>-</a>
			</li>`
  })

  str += `
    </ol>
		<h2>已经完成 <span id="donecount">${arr.length-ingNum}</span></h2>
		<ul id="donelist">`

  const complete = arr.filter(t => t.isSelect === true)
  complete.forEach(t => {
    str += `
    <li>
				<input class="input" data-id=${t.id} type="checkbox" checked="checked" />
				<p class="count" data-id=${t.id}>${t.text}
        <input data-id=${t.id} class="count_t" value="${t.text}" style="display:none">
        </p>
				<a class="del" href="javascript:;" data-id=${t.id}>-</a>
			</li>
    `
  })

  str += `
      </ul>
      `
  window.localStorage.setItem("cart", JSON.stringify(arr))
  $("body>section").html(str)
}

$("body>section")[0].addEventListener("click",function(e){
  if(e.target.className==="input"){
    let arr = JSON.parse(window.localStorage.getItem("cart")) || []
    const checked = e.target.checked
    const id = e.target.dataset.id
    arr[arr.findIndex(t=>t.id==id)].isSelect= checked 
    window.localStorage.setItem("cart", JSON.stringify(arr))
    List()
  }
  if(e.target.className==="del"){
    let arr = JSON.parse(window.localStorage.getItem("cart")) || []
    const id = e.target.dataset.id
    arr = arr.filter(t=>t.id!=id)
    window.localStorage.setItem("cart", JSON.stringify(arr))
    List()
  }
  if(e.target.className==="count"){
    let arr = JSON.parse(window.localStorage.getItem("cart")) || []
    $(e.target).children().css("display","block")

    const id = e.target.dataset.id
    console.log(e.target.innerText)
    window.localStorage.setItem("cart", JSON.stringify(arr))
  }
})
$("body>section")[0].addEventListener("change",function(e){
  if(e.target.className==="count_t"){
    let arr = JSON.parse(window.localStorage.getItem("cart")) || []
    const id = e.target.dataset.id
    arr[arr.findIndex(t=>t.id==id)].text=e.target.value
    $(e.target).css("display","none")
    window.localStorage.setItem("cart", JSON.stringify(arr))
    List()
  }
  
})



fun()
async function fun() {
  const res = await $.ajax({
    url: "/ks"
  })

  const str = `
  <p>
			Copyright &copy; 2021 千锋教育 版权所有
			<a href="javascript:;">京ICP备15058198号</a>
		</p>
		<p>
			您当前的ip地址是：<strong id="ipv4">${res.ip}</strong>，地理位置：<strong id="addr">${res.country+" " +res.area}</strong>
		</p>
  `
  $("footer").html(str)
}







